import React, { Component } from 'react'


/*
  vue mixin 混入
  1. 将一些可以重复使用的数据，函数或者钩子函数封装在一个 混入中
  2. 在使用的时候直接混入即可， mixins: []

  react 高阶组件
  1. 可以将一些重复使用的数据，函数等放在一个高阶组件中
  2. 使用的使用，直接调用即可
*/


// 高阶组件是一个纯函数，将一个组件作为参数，返回一个新的组件
const withFooter = (Com)=>{

  // class Footer extends Component {
  //   render(){
  //     return (<>
  //       <Com></Com>
  //       <footer style={{backgroundColor: '#f66', height: 50}}> 页脚 </footer>
  //     </>)
  //   }
  // }

  const Footer = ()=>{
    return (<>
      <Com></Com>
      <footer style={{backgroundColor: '#f66', height: 50}}> 页脚 </footer>
    </>)
  }

  return Footer

}

// 高阶组件
let Page1 = ()=>{
  return (<>
    <h1>page1 页面</h1>
  </>)
}

Page1 = withFooter(Page1)


//
// @withFooter() 装饰器的写法，现在 react 故意不支持装饰器
let Page2 = ()=>{
  return (<>
    <h1>page2 页面</h1>
  </>)
}

Page2 = withFooter(Page2)

export default class App extends Component {
  render() {
    return (
      <div>

        <Page1></Page1>

        <hr />
        <hr />
        <hr />
        <Page2></Page2>

      </div>
    )
  }
}
